<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>新大楼会议室预订系统登陆</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta name="keywords" content="登陆，会议室，预定，预定系统，同花顺">
      <meta name="description" content="同花顺新大楼会议室预订系统">
      <!-- 引入 Bootstrap -->
      <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
      <link rel="stylesheet" href="css/responsive-nav.css">
      <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
      <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
      <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->

      <style type="text/css">
      html,body{font-family: "微软雅黑";    padding: 0px !important; margin: 0px !important;direction: ltr;font-size:14px;height:100%;}
      .navbox{background:#212121;margin:0;}
      .navbar{min-height:40px;border:none;}
      .navbar-brand {height: 40px;padding: 12px 15px;color:#fff;font-weight:bolder;}
      .navbar-brand:hover,.navbar-brand:focus{color:#fff;}
      .navbar-header .admin_logo{height:40px;width:40px;float: left;margin-left:10px;padding:2%;}
      .navbar-header .admin_logo .admin_logo_logo{height:100%;width:100%;background:url("images/adminlogo.png") no-repeat;background-size:100% 100%;}
      .navbar-text{text-align:right;margin:0;line-height:40px;padding-right:6px;color:#F09C22;;}
      .navbar-text span{font-weight:bold;margin-right:6px;}
      .navbar-text a{font-weight: bold;transition:all 0.2s ease;color:#999;}
      .navbar-text a:hover{transition:all 0.2s ease;color: #F09C22;;}
      /*nav结束*/
      .content_box {padding-top: 40px;height:100%;}
      .content_box .navbar_left{height:100%;margin:0;}
      .leftnav{width:225px;padding:0;background: #3d3d3d;}
      .leftnav ul{width:100%;padding-top: 20px;}
      .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {color: #F09C22;background-color: #3D3D3D;}
      .active{position:relative;}
      .navbar-default .navbar-nav>li>a {color: #444;}
      .navbar-nav{margin:0;}
      .navbar-toggle{margin:0;margin-top:4px;}
      .navbar-toggle span{background:#5A5A5A;}
      .navbar-default .navbar-nav>li>a {
              color: #FFF;
          }
      .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus{color:#fff;}
      .navbar-default .navbar-nav>li{border-bottom: 1px solid #4C4C4C;}

      .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {
        color: #999;
        background-color: #3D3D3D;}
      .open>.dropdown-menu{background:#3d3d3d;}
      .dropdown-menu>li>a{color:#bdbdbd;}
      /*正文*/
      .bt_cotent{width:100%;}
      .bt_cotent .cont_content{margin-left:225px;}
      .bt_cotent .cont_content .yd_btn{margin-top:20px;}
      .bt_cotent .cont_content .yd_select{margin-top:20px;}
      .table-responsive {margin-top:15px;}
      .s_title{background:#53B2D0;padding:10px;border-radius:6px;color:#fff;}
      .s_title span{display:inline-block;}
      .s_title .information{float:left;}
      .s_title .state{float: right;} 
      .myage .row{margin-top:5px;border-bottom:1px solid #e5e5e5;}
      .clear{clear:both;}
      .btn-success{margin-top:20px;}
      .btn-lg, .btn-group-lg>.btn{font-size:14px;}
      /* 小型设备（平板电脑，768px 起） */
      @media (max-width: 768px) {
          .bt_cotent{padding-top:20px;}
          .navbar-text{background: #3D3D3D;}
          .navbar-brand{font-size:14px;}
          .user_message{background:#DEDEDE;}
          .leftnav{width:100%;}
          .content_box {padding-top: 59px}
          .leftnav ul li{background: #212121;}
          .navbar-default .navbar-nav .open .dropdown-menu>li>a {
          color: #bdbdbd;}
          .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover,.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus{color:#bdbdbd;}
          .bt_cotent .cont_content{width:100%;margin:0;}


       }
      @media (min-width: 768px){
          .leftnav{position: absolute;z-index:2;}
          .bt_cotent{position: absolute;top:0;}
          .navbar-nav>li {float:none;}
          .navbar-collapse.collapse{height:100%!important;}
          .active i{position:absolute;right:0;display:block;height:25px;width:8px;top: 14px;background:url("images/sidebar-menu-arrow.png")no-repeat;}
          .container {width: 525px;}

      }
      @media (min-width: 992px) {
        .container {
            width: 745px; 
        }

      }

      @media (min-width: 1200px){
      .container {
          width: 945px; 
        }
      }

       @media (min-width: 1400px){
      .container {
          width: 1180px; 
        }
      }

      </style>
   </head>
   <body>
     <div class="navbar navbar-fixed-top navbox">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" 
             data-target="#example-navbar-collapse">
             <span class="sr-only">切换导航</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
          </button>
          <div class="admin_logo">
            <div class="admin_logo_logo"></div>
          </div>
          <a class="navbar-brand" href="#">同花顺会议室预定系统</a>
        </div>
        <div class="user_message">
          <p class="navbar-text navbar-right">
            你好,<span>黄咪丽-权限1</span>
            <a href="#" class="navbar-link">退出</a>
            <a href="#" class="navbar-link">设置</a>
          </p>
        </div>
     </div>



     <div class="page-container row-fluid content_box">
        <div class="navbar navbar-default navbar_left" role="navigation">
           <div class="navbar-header">
           </div>
           <div class="collapse navbar-collapse leftnav" id="example-navbar-collapse">
              <ul class="nav navbar-nav">
                 <li>
                    <a href="#">会议审批</a>
                    <i></i>
                </li>
                 <li>
                    <a href="#">会议室管理</a>
                    <i></i>
                 </li>
                 <li class="active">
                    <a href="#">员工管理</a>
                    <i></i>
                 </li>
              </ul>
           </div>
            <div class="bt_cotent">
              <div class="cont_content">
                <div class="container">
                  <h3>
                    员工管理
                    <small>员工的管理界面</small>
                  </h3>

                  <div class="row">
                      <div class="col-xs-4 col-sm-4">
                        <div class="form-group">
                            <label for="name">部门筛选:</label>
                            <select class="form-control" id="startTime">
                               <option>I问财</option>
                               <option>大数据</option>
                            </select>
                        </div>
                      </div>
                      <div class="col-xs-4 col-sm-4">
                        <div role="form">
                          <div class="form-group">
                            <label for="name">搜索</label>
                            <input type="text" class="form-control" placeholder="关键字">
                          </div>
                         </div>
                      </div>
                      <div class="col-xs-4 col-sm-4">
                        <button type="button" class="btn btn-success btn-lg btn-block">搜索</button>
                      </div>    
                  </div>

                  <div class="row">
                      <div class="col-xs-4 col-sm-4">
                        <button type="button" class="btn btn-info btn-lg btn-block" data-toggle="modal" data-target="#mymessage">添加新用户</button>
                      </div>
                      <div class="col-xs-4 col-sm-4">
                       <button type="button" class="btn btn-warning btn-lg btn-block">批量添加用户</button>
                      </div>
                      <div class="col-xs-4 col-sm-4">
                        <button type="button" class="btn btn-danger btn-lg btn-block" data-toggle="modal" data-target="#deleteall">批量删除用户</button>
                      </div>    
                  </div>


                <div class="row">
                  <div class="col-xs-12 col-sm-12">
                      <div class="table-responsive">
                         <table class="table table-bordered" id="tbinput">
                            <caption style="color:red;">说明：对员工进行管理，包括员工批量导入，编辑员工信息等。</caption>
                            <thead>
                               <tr>
                                  <th><a href="javascript:void(0)" onclick="selectall()">全选</a> / <a href="javascript:void(0)" onclick="removeselect()">取消选择</a></th>
                                  <th>部门</th>
                                  <th>用户名</th>
                                  <th>申请人权限</th>
                                  <th>所在楼层</th>
                                  <th>电话</th>
                                  <th>邮件</th>
                                  <th>操作</th>
                               </tr>
                            </thead>
                            <tbody>
                               <tr>
                                  <td>
                                      <label class="checkbox-inline">
                                      <input type="checkbox" value="option1">选择
                                      </label>
                                  </td>
                                  <td>1123</td>
                                  <td>1</td>
                                  <td>1</td>
                                  <td>1</td>
                                  <td>1</td>
                                  <td>1</td>
                                  <td>
                                  	<button  class="btn btn-warning" data-toggle="modal" data-target="#ediet">修改</button>
                                  	<button  class="btn btn-danger" data-toggle="modal" data-target="#delete">删除</button>
                                  </td>
                               </tr>
                               <tr>
                                  <td>
                                      <label class="checkbox-inline">
                                        <input type="checkbox" value="option2">选择
                                      </label>
                                  </td>
                                  <td>1233</td>
                                  <td>1</td>
                                  <td>1</td>
                                  <td>1</td>
                                  <td>1</td>
                                  <td>1</td>
                                  <td>
                                  	<button class="btn btn-warning" data-toggle="modal" data-target="#ediet">修改</button>
                                  	<button class="btn btn-danger" data-toggle="modal" data-target="#delete">删除</button>
                                  </td>
                               </tr>
                               <tr>
                                  <td>
                                    <label class="checkbox-inline">
                                      <input type="checkbox" value="option3">选择
                                    </label>
                                  </td>
                                  <td>1232</td>
                                  <td>1</td>
                                  <td>1</td>
                                  <td>1</td>
                                  <td>1</td>
                                  <td>1</td>
                                  <td>
                                  	<button  class="btn btn-warning" data-toggle="modal" data-target="#ediet">修改</button>
                                  	<button  class="btn btn-danger" data-toggle="modal" data-target="#delete">删除</button>
                                  </td>
                               </tr>
                               <tr>
                                  <td>
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option4">选择
                                      </label>
                                  </td>
                                  <td>32323</td>
                                  <td>1</td>
                                  <td>1</td>
                                  <td>1</td>
                                  <td>1</td>
                                  <td>1</td>
                                  <td>
                                  	<button class="btn btn-warning">修改</button>
                                  	<button class="btn btn-danger">删除</button>
                                  </td>
                               </tr>
                            </tbody>
                         </table>
                      </div>    
                  </div>
                </div>
            </div>
        </div>
     </div>

     <!--详情页弹出层-->
     <!-- 模态框（Modal） -->
	<div class="modal fade" id="mymessage" tabindex="-1" role="dialog" 
	   aria-labelledby="myModalLabel" aria-hidden="true">
	   <div class="modal-dialog">
	      <div class="modal-content">
	         <div class="modal-header">
	            <button type="button" class="close" 
	               data-dismiss="modal" aria-hidden="true">
	                  &times;
	            </button>
	            <h4 class="modal-title" id="myModalLabel">
	               添加新的员工
	            </h4>
	         </div>
	         <div class="modal-body">
	              <div class="row">
                   <div class="col-xs-6 col-sm-6">
                       <div class="form-group">
                          <label>部门</label>
                           <select class="form-control" id="startTime">
                             <option>i问财</option>
                             <option>8</option>
                             <option>7</option>
                             <option>6</option>
                             <option>5</option>
                             <option>4</option>
                          </select>
                      </div>
                    </div>
                    <div class="col-xs-6 col-sm-6">
                       <div class="form-group">
                          <label>用户名:</label>
                          <input type="text" class="form-control" style="cursor: auto;">
                      </div>
                    </div>
               </div>
                  <div class="row">
                        <div class="col-xs-6 col-sm-6">
                           <div class="form-group">
                              <label>申请人权限:</label>
                              <select class="form-control" id="startTime">
                                 <option>1</option>
                                 <option>2</option>
                                 <option>3</option>
                              </select>
                          </div>
                        </div>

                        <div class="col-xs-6 col-sm-6">
                           <label>所在楼层:</label>
                              <select class="form-control" id="startTime">
                                 <option>1</option>
                                 <option>2</option>
                                 <option>3</option>
                              </select>
                        </div>

                        <div class="col-xs-12 col-sm-12">
                           <div class="form-group">
                          <label>电话:</label>
                          <input type="text" class="form-control" style="cursor: auto;">
                      </div>
                        </div>

                        <div class="col-xs-12 col-sm-12">
                          <div class="form-group">
                              <label>邮件:</label>
                              <input type="text" class="form-control" style="cursor: auto;">
                          </div>
                        </div>
                  
	         </div>
	         <div class="modal-footer">
	            <button type="button" class="btn btn-default" 
	               data-dismiss="modal">取消
	            </button>
              <button type="button" class="btn btn-primary" data-dismiss="modal">
                 确定
              </button>
	         </div>
	      </div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>
  </div>
	<!--修改弹出层-->
	<div class="modal fade" id="ediet" tabindex="-1" role="dialog" 
	   aria-labelledby="myModalLabel" aria-hidden="true">
	   <div class="modal-dialog">
	      <div class="modal-content">
	         <div class="modal-header">
	            <button type="button" class="close" 
	               data-dismiss="modal" aria-hidden="true">
	                  &times;
	            </button>
	            <h4 class="modal-title" id="myModalLabel">
	               不通过
	            </h4>
	         </div>
	         <div class="modal-body">
                  <div class="row">
                   <div class="col-xs-6 col-sm-6">
                       <div class="form-group">
                          <label>部门</label>
                           <select class="form-control" id="startTime">
                             <option>i问财</option>
                             <option>8</option>
                             <option>7</option>
                             <option>6</option>
                             <option>5</option>
                             <option>4</option>
                          </select>
                      </div>
                    </div>
                    <div class="col-xs-6 col-sm-6">
                       <div class="form-group">
                          <label>用户名:</label>
                          <input type="text" class="form-control" style="cursor: auto;">
                      </div>
                    </div>
               </div>
                  <div class="row">
                        <div class="col-xs-6 col-sm-6">
                           <div class="form-group">
                              <label>申请人权限:</label>
                              <select class="form-control" id="startTime">
                                 <option>1</option>
                                 <option>2</option>
                                 <option>3</option>
                              </select>
                          </div>
                        </div>

                        <div class="col-xs-6 col-sm-6">
                           <label>所在楼层:</label>
                              <select class="form-control" id="startTime">
                                 <option>1</option>
                                 <option>2</option>
                                 <option>3</option>
                              </select>
                        </div>

                        <div class="col-xs-12 col-sm-12">
                           <div class="form-group">
                          <label>电话:</label>
                          <input type="text" class="form-control" style="cursor: auto;">
                      </div>
                        </div>

                        <div class="col-xs-12 col-sm-12">
                          <div class="form-group">
                              <label>邮件:</label>
                              <input type="text" class="form-control" style="cursor: auto;">
                          </div>
                        </div>
           </div>
	         <div class="modal-footer">
	            <button type="button" class="btn btn-default" 
	               data-dismiss="modal">取消
	            </button>
	            <button type="button" class="btn btn-primary"
              data-dismiss="modal">
	               确定
	            </button>
	         </div>
	      </div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>
  </div>
     <!--删除弹出层-->
     <div class="modal fade" id="delete" tabindex="-1" role="dialog" 
	   aria-labelledby="myModalLabel" aria-hidden="true">
	   <div class="modal-dialog">
	      <div class="modal-content">
	         <div class="modal-header">
	            <button type="button" class="close" 
	               data-dismiss="modal" aria-hidden="true">
	                  &times;
	            </button>
	            <h4 class="modal-title" id="myModalLabel">
	               删除信息
	            </h4>
	         </div>
	         <div class="modal-body">
	            确定要删除此条信息吗？
	         </div>
	         <div class="modal-footer">
	            <button type="button" class="btn btn-default" 
	               data-dismiss="modal">取消
	            </button>
	            <button type="button" class="btn btn-primary" data-dismiss="modal">
	               确定
	            </button>
	         </div>
	      </div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>

  <div class="modal fade" id="deleteall" tabindex="-1" role="dialog" 
     aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="modal-dialog">
        <div class="modal-content">
           <div class="modal-header">
              <button type="button" class="close" 
                 data-dismiss="modal" aria-hidden="true">
                    &times;
              </button>
              <h4 class="modal-title" id="myModalLabel">
                 删除信息
              </h4>
           </div>
           <div class="modal-body">
              确定要删除所选信息吗？
           </div>
           <div class="modal-footer">
              <button type="button" class="btn btn-default" 
                 data-dismiss="modal">取消
              </button>
              <button type="button" class="btn btn-primary" data-dismiss="modal" id="deletetrue">
                 确定
              </button>
           </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
  </div>


      <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
      <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
      <!-- 包括所有已编译的插件 -->
      <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
      <!--nav导航-->
      <script src="js/responsive-nav.js"></script>


      <script type="text/javascript">
          function selectall(){
            var el = $("#tbinput input[type='checkbox']");
            el.each(function(i){
              el.eq(i).prop("checked",true);
            })
          }
          function removeselect(){
            var el = $("#tbinput input[type='checkbox']");
            el.each(function(i){
              el.eq(i).removeAttr("checked");
            })
          }

          //批量删除
          $("#deletetrue").click(function(){
              var arr = [];
              var cbox = $("#tbinput input[type='checkbox']");
              cbox.each(function(i){
                if (cbox.eq(i).prop("checked")) {
                    arr.push($(this).val());
                }
              });
              if (arr=="") {
                alert("没有选中有效目标！");
              }else{
                alert("删除成功！")
              };
          });

      </script>


   </body>
</html>
